<template>
    <suspense>
        <template #default>
            <AsyncCom/>
        </template>
        <template #fallback>
            <div class="loader-inner ball-clip-rotate">
                <div></div>
                <p>{{data.suspense_obj.msg || '加载中'}}</p>
            </div>
        </template>
    </suspense>
    <!-- <div class="loader-inner ball-clip-rotate">
        <div></div>
        <p>加载中</p>
    </div> -->
</template>
<script>
import { ref, onErrorCaptured, reactive, onRenderTracked } from 'vue';
import AsyncCom from './child.vue';
export default {
  name: 'Loading',
  components: { AsyncCom },
  props: {},
  setup(props) {
    const data = reactive({
        suspense_obj: {}
    })
    onErrorCaptured((err, instance, info) => {
        data.suspense_obj = err;
        console.log(err)
        console.log(instance)
        console.log(info)

        return false
    })
    onRenderTracked((event) => {
        console.log(event)
    })
    return {
        data,
    }
  }
}
</script>
<style scoped>
.wrap {
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    background-color: #ececec;
}
.ball-clip-rotate {
    padding: 20px 0;
    text-align: center;
    font-size: 18px;
    /* p {
        padding-top: 20px;
    } */
}
.ball-clip-rotate > div {
    background-color: #000;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
    border: 2px solid #000;
    border-bottom-color: transparent;
    height: 25px;
    width: 25px;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 0.75s 0s linear infinite;
          animation: rotate 0.75s 0s linear infinite; 
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }

  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }
</style>